<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>问题列表页</title>
		<link rel="stylesheet" type="text/css" href="/assets/css/common.css" />
		<link rel="stylesheet" type="text/css" href="/assets/css/normalize.css" />
		<link rel="stylesheet" href="/assets/css/pagination.css" />

		<style>
		    body{
		    	font-family: "微软雅黑";
		    	background-color:rgb(240,240,240);;
		    } 
			.jx-content {
				margin: 0 150px;
				background-color: #fff;
				padding:10px;
				height:100%;
			}
			
			.jx-search-box {
				margin:0;
				width: 200px;
				height: 28px;
				border: 1px solid #BDBDBD;
				text-align: left;
			}
			
			.jx-search {
				float: right;
				margin-top:20px;
				
			}
			
			.jx-search-button {
				display: inline-block;
				width: 32px;
				height: 32px;
				background: url(/assets/img/button.png);
			}
			.jx-col1{
				display: inline-block;
				width:50%;
				text-align: center;
			}
			.jx-col2{
				display: inline-block;
				width:20%;
				text-align: center;
			}
			.jx-col3{
				display: inline-block;
				width:20%;
				text-align: center;
			}
			.jx-col4{
				display: inline-block;
				width:15%;
				text-align: center;
			}
			.jx-th{
				background-color: #DFEBFB;
				padding:5px 0;
				font-weight: bold;
			}
			.jx-list{
				font-size: 14px;
			}
			.jx-link{
				color:#3476a8;
				font-weight: bold;
			}
			.jx-td{
				border-bottom: 1px dashed #BDBDBD;
				padding:5px 0;
			}
			.jx-pag{
				float:right;
				margin-top:20px;
			}
			.jx-clear{
				clear:both;
			}
			.jx-loading{
				display:block;
				margin:20px auto;
			}
			.jx-nav{
				background-color:#ddd;
				overflow:hidden;
			}
			.jx-nav-item{
			    float:left;
			    padding:5px 10px;
			    width:80px;
			    text-align:center;
			}
			
			.jx-nav-item:hover{
				background-color:#51a282;
			}
			.jx-nav-item:hover a{
				color:#fff;
			}
		</style>
	</head>

	<body>
		<div class="jx-content">
			<header><img class="jx-logo" src="/assets/img/logo.png" />
				<div class="jx-search">
				<form id="form" action="/article/list" method="post">
					<input type="search" class="jx-search-box" placeholder="请输入关键字" value="$!{keyword}">
					
					<span class="jx-search-button"></span>
				</form>
				</div>
				<ul class="jx-nav">
					<li class="jx-nav-item"><a href="/">首页</a></li>
					<li class="jx-nav-item"><a href="/user/center">个人中心</a></li>
				</ul>
				
			</header>
			
			<section>
				<ul class="jx-list">
					
					<li class="jx-th">
						<span class="jx-col1">标题</span>
						<span class="jx-col2">部门</span>
						<span class="jx-col3">时间</span>
					</li>
					<img class="jx-loading" src="/assets/img/loading.gif">
					
				</ul>
				
			</section>
			<section class="jx-pag"><div class="M-box"></div></section>
			<div class="jx-clear"></div>
		</div>

		

		<script src="/assets/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/assets/js/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			
			
			function getPagedata(pageNum,keyword){
				$.post("/question/getPageData",{"pageNum":pageNum,"keyword":keyword}, 
			    function(result) {
					 $(".jx-td").remove();
					 var html="";
					 var data=result.data;
					 for(i=0;i<data.length;i++){
						 html+='<li class="jx-td">'+
							'<span class="jx-col1"><a href="/question/detail/'+data[i].id+'" class="jx-link">'+data[i].title+'</a></span>'+
							'<span class="jx-col2">'+data[i].depart_name+'</span>'+
							'<span class="jx-col3">'+data[i].create_time+'</span></li>';
					 }
					 $(".jx-loading").remove();
					 $(".jx-list").append(html);
			    },"json");
			}
			
			$('.jx-search-button').click(function(){
				var keyword=$('.jx-search-box').val();
				if(keyword==''){
					return;
				}
				window.location.href="/article/list?keyword="+keyword;
			});
			
			$(function(){
				var keyword=$('.jx-search-box').val();
				$('.M-box').pagination({
					pageCount: $pageCount,
					jump: true,
					coping: true,
					homePage: '首页',
					endPage: '末页',
					prevContent: '上页',
					nextContent: '下页',
					callback: function(index) {
						$(".jx-loading").remove();
						var pageNum=index.getCurrent();
						$(".jx-list").append('<img class="jx-loading" src="/assets/img/loading.gif">');
						var keyword=$('.jx-search-box').val();
						getPagedata(pageNum,keyword);
					}
				}, function(api) {
					getPagedata(1,keyword);
				});
				
				
			});
		</script>
	</body>

</html>